<template>
	<view>
		<view class="bottom-content flex-row" v-if="list.length > 0">
			<view class="card" v-for="(item, index) in list":key="index">
				<view v-if="index < 6" @click="goToDetailPage(item)">
					<image class="is-delete" v-if="isDelete" src="../../../static/img/delete.png" mode=""></image>
					<image :src="item.dataCover" class="cover"></image>
					<view class="title one-ellipsis">{{item.dataTitle}}</view>
				</view>
			</view>
		</view>
		<view class="">
			<button type="default" @click="goToPage('')">展示更多</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: []
			}
		},
		onLoad() {
			uni.request({
			    url: `${this.baseUrl}/user/list`,
			    method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
			    header: {
			        'content-type': 'application/json'
			    },
			    success: (res) => {
					var data = res.data.result.list
					this.list = data
					for (let i = 0; i < this.list.length; i++) {
						this.list[i].dataCover = this.baseUrl + this.list[i].dataCover
						this.list[i].dataFile = this.baseUrl + this.list[i].dataFile
					}
			    }
			})
		},
		methods: {
			goToPage(){
				uni.navigateTo({
					url: '/pages/views/login/index'
				})
			},
			goToDetailPage(item){
				console.log(item)
				uni.showLoading({
					title: 'loading'
				});
				wx.downloadFile({
					url: item.dataFile,
					success: function (res) {
						var Path = res.tempFilePath              //返回的文件临时地址，用于后面打开本地预览所用
						wx.openDocument({
							filePath: Path,
							success: function (res) {
								uni.hideLoading()
								// console.log('打开成功')
							}
						})
					},
					fail: function (res) {
						console.log(res);
					}
				})
			}
		}
	}
</script>

<style>
.bottom-content {
	flex-wrap: wrap;
}
.bottom-content .card{
	position: relative;
	flex: 0 0 29.333%;
	margin: 0 2% 45rpx;
}
.bottom-content .card .is-colloction{
	position: absolute;
	top: 0;
	left: 0;
	width: 44rpx;
	height: 44rpx;
	background: rgba(0, 0, 0, 0.25);
}
.bottom-content .card .is-delete{
	position: absolute;
	top: 0;
	right: 0;
	width: 44rpx;
	height: 44rpx;
}
.bottom-content .card .cover{
	width: 100%;
	height: 260rpx;
	border: 2rpx solid #c1c1c1;
	border-radius: 5rpx;
}
button{
	width: 340rpx;
	height: 90rpx;
	line-height: 90rpx;
	font-size: 32rpx;
	background: #84D5F7 !important;
	color: #FFFFFF !important;
	font-weight: 500;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 600;
	border-radius: 90rpx;
}
</style>
